<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        body, html {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            /* 设置背景图像路径 */  
            background-image: url("./photo/背景.png");  
              
            /* 设置背景图像铺满整个容器 */  
            background-size: cover;  
              
            /* 设置背景图像始终位于容器的中心 */  
            background-position: center;  
              
            /* 设置背景图像不重复 */  
            background-repeat: no-repeat;  
              
            /* 固定背景图像，使页面内容滚动时背景图像保持固定 */  
            background-attachment: fixed;  
           
        }  
        .h1{ text-align: center;
            font-size: 60px;
        }
        fieldset {  
           
            width: 500px; /* 设置fieldset的宽度为300像素 */  
            border: 5px solid black; /* 可选：设置边框以便更清楚地看到fieldset的边界 */  
            padding: 10px; /* 可选：添加一些内边距 */  
            margin: 0 auto; /* 可选：使fieldset在页面上水平居中 */  
        }  
        .x{
             
            position: absolute;  
            top: 0;  
            right: 0;  
        }
        .y{   
            position: absolute;  
            top: 0;  
            left: 0;  

        }
           /* 透明度 */
           .tmd {
        background-color: rgba(255, 255, 255, 0.2); /* 最后一个参数是透明度，范围从0到1 */
    }

  	/* 按钮 */

      button {
	  margin: 20px;
	}
	.custom-btn {
	  width: 130px;
	  height: 40px;
	  color: #fff;
	  border-radius: 5px;
	  padding: 10px 25px;
	  font-family: 'Lato', sans-serif;
	  font-weight: 500;
	  background: transparent;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  position: relative;
	  display: inline-block;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  outline: none;
	}
  	/* 12 */
		.btn-12{
		  position: relative;
		  right: 20px;
		  bottom: 20px;
		  border:none;
		  box-shadow: none;
		  width: 130px;
		  height: 40px;
		  line-height: 42px;
		  -webkit-perspective: 230px;
		  perspective: 230px;
		}
		.btn-12 span {
		  background: rgb(1, 14, 19);
		background: linear-gradient(0deg, rgb(1, 14, 19) 0%, rgb(0, 6, 11) 100%);
		  display: block;
		  position: absolute;
		  width: 130px;
		  height: 40px;
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  border-radius: 5px;
		  margin:0;
		  text-align: center;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-transition: all .3s;
		  transition: all .3s;
		}
		.btn-12 span:nth-child(1) {
		  box-shadow:
		   -7px -7px 20px 0px #fff9,
		   -4px -4px 5px 0px #fff9,
		   7px 7px 20px 0px #0002,
		   4px 4px 5px 0px #0001;
		  -webkit-transform: rotateX(90deg);
		  -moz-transform: rotateX(90deg);
		  transform: rotateX(90deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12 span:nth-child(2) {
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12:hover span:nth-child(1) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		}
		.btn-12:hover span:nth-child(2) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		 color: transparent;
		  -webkit-transform: rotateX(-90deg);
		  -moz-transform: rotateX(-90deg);
		  transform: rotateX(-90deg);
		}
    /* 按钮的左侧位置 */
    .positioned-div {  
    position: absolute;  
    top: 250px;  
    left: 90px;  
}
/* 按钮的右侧位置 */
.positioned-div2 {  
    position: absolute;  
    top: 250px;  
    left: 1400px;  
}


 /* 音乐按钮的样式 */
 .music-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./photo/图层\ 2.png'); /* 音乐开启时的图标 */
    background-size: cover;
    cursor: pointer;
  }

  /* 当音乐暂停时的按钮样式 */
  .music-button.paused {
    background-image: url('./photo/图层\ 1.png'); /* 音乐关闭时的图标 */
  }


    </style>  
</head>  
<body>  

    <h1 class="h1">时尚餐厅</h1>
    <br>
   
<br>
<strong>
<fieldset class="tmd">  
    <legend>联系餐厅</legend>  
<h1>总经理</h1>
<h3>张经理 手机号：19569349824</h3>
<h1>副经理</h1>
<h3>姜经理 手机号：19578378824</h3>
<h1>前台</h1>
<h3>坐机号：19578349824</h3>
<h1>厨房</h1>
<h3>管理人员手机号：19578349845</h3>
</fieldset>  
</strong>


<div class="x">
    <img src="./photo/小猫.png" alt="" width="70px"height="70px">
    <a href="./1主页面.html"><img src="./photo/退出登入.png" alt=""></a>
</div>
<a href="./5餐厅主页面 重做版.html"><img class="y" src="./photo/小房子.png" alt=""></a>



<div class="positioned-div">

    <a href="./5餐厅主页面 重做版.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅主页</span></button></a>
    <br> <br><br><br>
    <a href="./6菜谱.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅菜谱</span></button> </a>
    <br><br><br><br>
    <a href="./15餐厅数据11111111.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅数据</span></button> </a>
    <br><br><br><br>
    <a href="./16人员信息.html"><button class="custom-btn btn-12"><span>进入!</span><span>人员信息</span></button> </a>
    </div>
	<div class="positioned-div2">
		<a href="./20预约房间.html"><button class="custom-btn btn-12"><span>进入!</span><span>预约房间</span></button></a>
		<br><br><br>
		<a href="./19查看订单.html"><button class="custom-btn btn-12"><span>进入!</span><span>查看订单</span></button></a>
		<br> <br><br>
		<a href="./17餐厅宗旨.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅宗旨</span></button> </a>
		<br><br><br>
		<a href="./18联系餐厅.html"><button class="custom-btn btn-12"><span>进入!</span><span>联系餐厅</span></button> </a>
		<br><br><br>
		<a href="./22退出界面.html"><button class="custom-btn btn-12"><span>进入!</span><span>退出界面</span></button> </a>
		</div>
    

    <!-- 音乐文件，默认设置为循环播放 -->
<audio id="backgroundMusic" src="./音乐/圈9 - 萤火飞光.mp3" loop autoplay preload="auto">
	您的浏览器不支持音频元素。
	</audio>
	
	<!-- 音乐开关按钮 -->
	<div class="music-button" onclick="toggleMusic()"></div>
	
</body>  
<SCript src="音乐.JS"></SCript>
</html>